<template>
  <div>
    <el-dialog
      title="通知对象接听情况"
      :visible.sync="dialogVisible"
      width="1200px"
      :before-close="closeDialog"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :modal="true"
    >
      <div class="header">
        <div class="header_left">
          <el-input
            size="small"
            style="width: 150px; margin-left: 15px"
            clearable
            @clear="clearDeviceStatus"
            oninput="value=value.replace(/[^\d]/g,'')"
            @blur="searchForm.phone = $event.target.value"
            v-model="searchForm.phone"
            placeholder="手机号"
            maxlength="11"
          ></el-input>

          <!-- <el-select v-model="searchForm.orgId" filterable placeholder="请选择单位" class="elSelect"
          style="width: 150px;margin-left: 15px" clearable @clear="clearDeviceStatus">
          <el-option v-for="(item,i) in projectList" :key="i" :label="item.orgName" :value="item.id">
          </el-option>
        </el-select> -->

          <!-- <el-select
            size="small"
            v-model="searchForm.result"
            style="width: 150px; margin-left: 15px"
            placeholder="成功/失败"
            clearable
            @change="searchClick"
          >
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.type"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
          <el-select
            size="small"
            v-model="searchForm.code"
            style="width: 150px; margin-left: 15px"
            placeholder="接听/未接听"
            clearable
            @change="searchClick"
          >
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.type"
              :value="item.id"
            >
            </el-option>
          </el-select>

          <el-date-picker
            v-model.trim="timeArr"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            :picker-options="pickerOptions"
            style="width: 360px; margin-left: 15px"
            size="small"
            @change="searchClick"
          >
          </el-date-picker>

          <el-button size="small" style="margin-left: 15px" @click="searchClick"
            >查询</el-button
          >
        </div>
      </div>
      <div class="content" style="margin-top: 10px">
        <el-table
          :data="tableData"
          height="calc(100% - 65px)"
          class="table"
          :header-cell-style="headerStyle"
        >
          <el-table-column label="序号" type="index" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <!-- <el-table-column
            prop="result"
            label="发送结果"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.result == 1" type="success">成功</el-tag>
              <el-tag v-else-if="scope.row.result == 0" type="danger"
                >失败</el-tag
              >
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="result"
            label="接听"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.code === 0" type="success">是</el-tag>
              <el-tag v-else type="danger">否</el-tag>
            </template>
          </el-table-column> -->

          <el-table-column
            prop="apiResp"
            label="响应内容"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            prop="code"
            label="接听状态"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.code == 0" type="success"
                >正常接听</el-tag
              >
              <el-tag v-else-if="scope.row.code == 1" type="danger"
                >关机</el-tag
              >
              <el-tag v-else-if="scope.row.code == 2" type="danger"
                >通话中</el-tag
              >
              <el-tag v-else-if="scope.row.code == 3" type="warning"
                >不在服务区</el-tag
              >
              <el-tag v-else-if="scope.row.code == 4" type="warning"
                >您拨打的号码已欠费</el-tag
              >
              <el-tag v-else-if="scope.row.code == 5" type="warning"
                >无人接听</el-tag
              >
              <el-tag v-else-if="scope.row.code == 6" type="warning"
                >暂时无法接通</el-tag
              >
              <el-tag v-else-if="scope.row.code == 7" type="warning"
                >停机</el-tag
              >
              <el-tag v-else-if="scope.row.code == 8" type="warning"
                >空号</el-tag
              >
              <el-tag v-else-if="scope.row.code == 9" type="warning"
                >电路正忙</el-tag
              >
              <el-tag v-else-if="scope.row.code == 10" type="warning"
                >用户正忙</el-tag
              >
              <el-tag v-else-if="scope.row.code == 11" type="warning"
                >其他原因</el-tag
              >
              <el-tag v-else-if="scope.row.code == 12" type="warning"
                >呼叫受限，请勿越权使用</el-tag
              >
              <el-tag v-else-if="scope.row.code == 13" type="warning"
                >您拨打的号码已暂停服务</el-tag
              >
              <el-tag v-else-if="scope.row.code == 15" type="warning"
                >号码不存在</el-tag
              >
              <el-tag v-else-if="scope.row.code == 16" type="warning"
                >来电提醒</el-tag
              >
              <el-tag v-else-if="scope.row.code == 17" type="warning"
                >您拨打的号码已过期</el-tag
              >
              <el-tag v-else-if="scope.row.code == 18" type="warning"
                >网络忙</el-tag
              >
              <el-tag v-else-if="scope.row.code == 19" type="warning"
                >未开通语音通话功能</el-tag
              >
              <el-tag v-else-if="scope.row.code == 20" type="warning"
                >无应答</el-tag
              >
              <el-tag v-else-if="scope.row.code == 22" type="warning"
                >系统正忙</el-tag
              >
              <el-tag v-else-if="scope.row.code == 23" type="warning"
                >加拨零</el-tag
              >
              <el-tag v-else-if="scope.row.code == 24" type="warning"
                >您拨打的号码已改号</el-tag
              >
              <el-tag v-else-if="scope.row.code == 25" type="warning"
                >未开通联通秘书服务</el-tag
              >
              <el-tag v-else-if="scope.row.code == 26" type="warning"
                >来电助手</el-tag
              >
              <el-tag v-else-if="scope.row.code == 27" type="warning"
                >暂时无法接通</el-tag
              >
              <el-tag v-else-if="scope.row.code == 28" type="warning"
                >漏话提醒服务</el-tag
              >
              <el-tag v-else-if="scope.row.code == 29" type="warning"
                >留言信箱</el-tag
              >
              <el-tag v-else-if="scope.row.code == 30" type="warning"
                >您拨打的号码有误</el-tag
              >
              <el-tag v-else-if="scope.row.code == 31" type="warning"
                >不在使用中</el-tag
              >
              <el-tag v-else type="danger">呼出失败</el-tag>
            </template>
          </el-table-column>

          <!-- <el-table-column prop="callFrom" label="语音服务号" align="center" show-overflow-tooltip>
        </el-table-column>

        <el-table-column prop="fee" label="计费时长" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.fee }}分钟
          </template>
        </el-table-column> -->

          <el-table-column
            prop="startCallTime"
            label="发起时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="acceptTime"
            label="接听时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="endCallTime"
            label="结束时间"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>

          <!-- <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip>
        </el-table-column> -->
        </el-table>
        <pagination
          :page.sync="page"
          :limit.sync="limit"
          :total="total"
          @pagination="PageSmsLog"
          class="pagination"
        >
        </pagination>
      </div>
    </el-dialog>
  </div>
</template>
    
  <script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqPageVoiceLog } from "@/api/api";
import { mapState } from "vuex";

export default {
  props: ["alarmId"],
  components: {
    Pagination,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      //实现时间限制选择在一个月内而且不能超过当前时间
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.cuttentTime = minDate.getTime();
          if (maxDate) {
            this.cuttentTime = "";
          }
        },
        disabledDate: (time) => {
          //获取当前时间戳
          let myDate = new Date();
          let newY = myDate.getFullYear();
          let newM = myDate.getMonth() + 1;
          let newD = myDate.getDate();
          let oldTime =
            newY +
            "-" +
            (newM < 10 ? "0" + newM : newM) +
            "-" +
            (newD < 10 ? "0" + newD : newD) +
            " " +
            "23:59:59";
          // let oldTime="2022-7-5 23:59:59"
          oldTime = new Date(oldTime).getTime(); // 将中国时间转换成毫秒
          // 今天之后的时间不可选
          if (time.getTime() > oldTime) {
            //time.getTime() > Date.now()
            return true;
          }
          //选择日期范围为一个月
          if (this.cuttentTime != "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.cuttentTime - one;
            const maxTime = this.cuttentTime + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      search_val: "",
      page: 1,
      limit: 10,
      total: 0,
      tableData: [{}, {}, {}, {}, {}, {}, {}, {}],
      searchForm: {
        phone: "",
        imei: "",
        result: "",
        code: "",
      },
      // 成功失败
      //   statusList: [
      //     { id: 1, type: "成功" },
      //     { id: 0, type: "失败" },
      //   ],
      // 接听/未接听
      statusList: [
        { id: 1, type: "未接听" },
        { id: 0, type: "接听" },
      ],
      projectList: [],
      timeArr: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    // this.PageSmsLog();
  },
  methods: {
    //查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      await this.PageSmsLog();
    },
    clearDeviceStatus() {
      this.page = 1;
      this.limit = 10;
      this.PageSmsLog();
    },

    async PageSmsLog() {
      if (this.timeArr == null) {
        this.timeArr = "";
      }
      let res = await reqPageVoiceLog(this.page, this.limit, {
        orgId: "",
        phone: this.searchForm.phone,
        imei: this.searchForm.imei,
        result: this.searchForm.result,
        code: this.searchForm.code,
        startTime: this.timeArr[0],
        endTime: this.timeArr[1],
        alarmId: this.alarmId,
      });
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.rows;
      this.total = res.data.total;
    },

    closeDialog() {
      this.searchForm.phone = this.searchForm.code = "";
      this.timeArr = [];
      (this.tableData = [{}, {}, {}, {}, {}, {}, {}, {}]),
        (this.dialogVisible = false);
    },
  },
};
</script>
    
  <style lang="less" scoped>
@import url("~@views/style/tablePage.less");

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
  background: @primaryHeaderBgcolor !important;
}

// 查询按钮
::v-deep .el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
  &:hover {
    box-shadow: 0px 0px 16px 0px ~"rgb(115 103 240 / 50%)";
    transition: box-shadow 0.3s;
  }
}

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
  background: @primaryHeaderBgcolor !important;
  color: @primaryContentTxt;
}
//  日期控件对齐
.el-range-editor.el-input__inner {
  padding: 2px 10px !important;
}

::v-deep .el-dialog__header {
  display: block !important;
  background: #384e91;
  border-bottom: 1px solid #06b1e7;
  text-align: center;

  .el-dialog__title {
    color: #f1f1f1;
  }
}

::v-deep .el-dialog__body {
  position: relative;
  //   width: 100%;
  height: 73vh;
  color: #f1f1f1;
  background: #384e91 !important;
}

::v-deep .el-dialog {
  //   height: 80% !important;
  //   min-height: 76vh;
}

::v-deep .el-dialog__footer {
  border: 1px solid #2f3349;
  background: #2f3349;
}

.el_button {
  border-color: #7367f0 !important;
  background-color: #7367f0 !important;
}

// 日期控件
.el-range-editor.el-input__inner {
    margin-left: 15px;
    height: 32px;
    padding: 0px 10px;
}

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
    background: transparent !important;
    // color: @primaryContentTxt;
}
</style>
    